import React from 'react'
import '../styles/HomePage.css'

function HomePage() {
  return (
    <div className="home-page">
      <div className="hero-section">
        <h1>🎉 欢迎来到 React 学习项目</h1>
        <p className="subtitle">这是一个完整的 React 项目，展示了现代前端开发的最佳实践</p>
      </div>

      <div className="features-grid">
        <div className="feature-card">
          <div className="feature-icon">🧩</div>
          <h3>组件化开发</h3>
          <p>使用 React 组件构建可重用的 UI 元素，提高代码复用性和维护性</p>
        </div>

        <div className="feature-card">
          <div className="feature-icon">⚡</div>
          <h3>现代化工具</h3>
          <p>使用 Vite 作为构建工具，提供快速的开发体验和热重载功能</p>
        </div>

        <div className="feature-card">
          <div className="feature-icon">🎨</div>
          <h3>响应式设计</h3>
          <p>采用现代化的 CSS 设计，支持各种屏幕尺寸和设备</p>
        </div>

        <div className="feature-card">
          <div className="feature-icon">📦</div>
          <h3>模块化架构</h3>
          <p>清晰的文件结构，便于团队协作和项目维护</p>
        </div>
      </div>

      <div className="project-structure">
        <h2>📁 项目结构</h2>
        <div className="structure-tree">
          <pre>{`src/
├── 📁 components/          # 组件目录
│   ├── 📁 ui/             # UI 组件
│   └── 📁 layout/         # 布局组件
├── 📁 pages/              # 页面组件
├── 📁 hooks/              # 自定义 Hooks
├── 📁 utils/              # 工具函数
├── 📁 constants/          # 常量定义
├── 📁 styles/             # 样式文件
└── 📁 assets/             # 静态资源`}</pre>
        </div>
      </div>

      <div className="tech-stack">
        <h2>🛠️ 技术栈</h2>
        <div className="tech-grid">
          <div className="tech-item">
            <span className="tech-name">React 18</span>
            <span className="tech-desc">用户界面库</span>
          </div>
          <div className="tech-item">
            <span className="tech-name">Vite</span>
            <span className="tech-desc">构建工具</span>
          </div>
          <div className="tech-item">
            <span className="tech-name">ES6+</span>
            <span className="tech-desc">现代 JavaScript</span>
          </div>
          <div className="tech-item">
            <span className="tech-name">CSS3</span>
            <span className="tech-desc">样式设计</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default HomePage 